<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画案例</title>
    <style>
       body{
           width: 100vw;
           height: 100vh;
           display:flex;
           justify-content: center;
           align-items: center;
           background: #2c3e50;
       }
       *{
           padding: 0;
           margin: 0;
       }
       div{
           color: #9b59b5;
           font-size: 5em;
           font-weight: bold;
           text-transform: uppercase;
           cursor: pointer;
       }
       div > span{
           position: relative;
           display: inline-block;
       }

       .changeColor{
           animation-name: changeColor;
           animation-duration: 0.5s;
           animation-direction: alternate;
           animation-iteration-count: 2;
           animation-timing-function: linear;
       }

       @keyframes changeColor{
           50%{
               color: #f1c40f;
               transform: scale(1.5);
           }
           to{
               color: #9b59b6;
               transform: scale(0.5);
           }
       }

    </style>
</head>
<body>
    <div>老婆，我永远爱你❤</div>
</body>
</html>
<script>
    let div = document.querySelector('div');
    let divTxt = div.textContent;
    let DivArr = [...divTxt];
    DivArr.reduce(function(first,elem,index){
        //先把之前的数据清空
        //这里存在一个数据优先级的问题
        (first == index) && (div.innerHTML = '');
        //创建元素加入div
        let span = document.createElement('span');
        span.innerHTML = elem;
        div.append(span);
        span.addEventListener('mouseover',function(){
            this.classList.toggle('changeColor');
        });
        span.addEventListener('animationend',function(){
            this.classList.remove('changeColor');
        });
    },0);


</script>